<template>
  <div>
    <span>Stroke color: </span>
    <select v-model="data">
      <option v-for="color of colors" :value="color">{{ color }}</option>
    </select>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

const colors = [
  "red",
  "green",
  "blue",
  "orange",
  "cornflowerblue",
  "goldenrod",
  "navy",
  "purple",
] as const;
// type StrokColor = (typeof colors)[number];
const props = defineProps<{
  value: string;
}>();
const emit = defineEmits<{
  "update:value": [v: string];
}>();
const data = computed({
  get() {
    return props.value;
  },
  set(v: string) {
    emit("update:value", v);
  },
});
</script>

<style scoped></style>
